import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:jet_rails/jr_app/jr_models/jr_good_model.dart';

class JrGoodWidget extends StatefulWidget {
  final JrGoodsModel goodModel;
  const JrGoodWidget({Key? key, required this.goodModel}) : super(key: key);

  @override
  State<JrGoodWidget> createState() => _JrGoodWidgetState();
}

class _JrGoodWidgetState extends State<JrGoodWidget> {
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Container(
          width: 165.w,
          margin: EdgeInsets.only(bottom: 12.h),
          padding: EdgeInsets.only(top: 27.h, left: 32.w, bottom: 12.h, right: 8.w),
          decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.circular(12.r),
            gradient: const LinearGradient(
                colors: [Color(0xFF684069), Color(0xFF9046B4)], begin: Alignment.topLeft, end: Alignment.bottomRight),
          ),
          child: Column(
            children: [
              Row(
                children: [
                  Image.asset(
                    'assets/webp/icon_coin.webp',
                    width: 44.w,
                    height: 44.h,
                  ),
                  SizedBox(width: 12.w),
                  Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    mainAxisAlignment: MainAxisAlignment.center,
                    mainAxisSize: MainAxisSize.max,
                    children: [
                      SizedBox(height: 8.h),
                      Container(
                        alignment: Alignment.centerLeft,
                        child: Text(
                          '${widget.goodModel.exchangeCoin}',
                          style: TextStyle(
                            color: Colors.white,
                            fontSize: 20.sp,
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                      ),
                      SizedBox(height: 6.h),
                      if ((widget.goodModel.discount ?? 0) > 0)
                        Container(
                          alignment: Alignment.centerLeft,
                          child: Text(
                            '${((widget.goodModel.discount ?? 0) * 100).toInt()}% off',
                            style: TextStyle(color: const Color(0xFFFF3EC8), fontSize: 9.sp),
                          ),
                        ),
                      SizedBox(height: 10.h),
                    ],
                  )
                ],
              ),
              SizedBox(height: 26.h),
              Row(
                mainAxisAlignment: MainAxisAlignment.end,
                children: [
                  Text(
                    '\$${widget.goodModel.price}',
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 18.sp,
                      fontWeight: FontWeight.w500,
                    ),
                  ),
                  SizedBox(width: 8.w),
                  if (widget.goodModel.price != widget.goodModel.originalPrice)
                    Text(
                      '\$${widget.goodModel.originalPrice}',
                      style: TextStyle(
                        color: Colors.white54,
                        fontSize: 10.sp,
                        decoration: TextDecoration.lineThrough,
                      ),
                    ),
                ],
              )
            ],
          ),
        ),
        Positioned(
          top: 0,
          right: 0,
          child: SizedBox(
            height: 22,
            child: Container(
              padding: const EdgeInsets.only(left: 6, right: 6, top: 2, bottom: 2),
              decoration: const BoxDecoration(
                gradient: LinearGradient(
                  colors: [
                    Color(0xFFC2FB1B),
                    Color(0xFFC0FE1C),
                  ],
                  begin: Alignment.centerLeft,
                  end: Alignment.centerRight,
                ),
                borderRadius: BorderRadius.only(
                  bottomLeft: Radius.circular(8),
                  topRight: Radius.circular(8),
                ),
              ),
              child: Text((widget.goodModel.tags ?? "Big Deal").replaceAll('Hot', '🔥HOT'),
                  style: const TextStyle(fontSize: 11, color: Color(0xFF202020))),
            ),
          ),
        )
      ],
    );
  }
}
